<template>
  <div class="order-con">
    <div class="bannerbox">
      <!--背景大图使用CDN加速-->
      <img class="backimg" src="http://o928reoe7.bkt.clouddn.com/1048447759224295424.jpg" alt="" />
    </div>
    <!-- 标题 -->
    <div class="head">
      <img src="../../assets/images/newimg/back.png" alt="">
      <span>我的订单</span>
    </div>
    <div style="height:30rem;overflow-y: scroll;">
        <div class="orderList" v-for="(item,index) in dataList" :key="index">
        <div class="order-num">
          <div>
            <span>订单号</span>
            {{item.orderName}}
          </div>
          <span>{{item.orderDate | dataFormat('yyyy-MM-dd hh:mm:ss')}}</span>
        </div>
        <ul>
          <li v-for="(item,index) in item.orderValue" :key="index">
            <div>
              <img :src="item.businessPic" alt="" style=" width: 1rem;height: 1rem;border-radius: .5rem;">
              <span>{{item.businessName}}</span>

            </div>
            <span :class="item.after==0?'active':''" @click="write(item.businessId)">{{item.after==1?'已使用':'使用'}}</span>
          </li>
        </ul>
        </div>
    </div>

  </div>
</template>
<script>
  import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
      activityId: '',
      userOpenId: '',
      data: '',
      dataList: [],
      staticbtn: '1',
      sy:'使用',

    }
  },
  methods: {
    // 核销
    write (businessId) {

       MessageBox({
          // title: '确认',
          message: '确定使用吗?',
          showCancelButton: true
        }).then(action => { 
           if (action == 'confirm') {     //确认的回调
              console.log(businessId)
                var that = this
                this.$http({
                  method: 'get',
                  url: 'http://api.wangjianxin.top/after?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId + '&businessId=' + businessId
                }).then(function (resp) {
                  console.log(resp);
                  if (resp.status === 200) {
                    if (Number(resp.data) === 1) {
                       MessageBox({
                        message: '核销成功!',
                      });

                      setTimeout(function(){
                        location.reload()
                      },1000)

                    } else if (Number(resp.data) === 0) {
                        MessageBox({
                          message: '核销失败!',
                        });
                    } else if (Number(resp.data) === 99) {
                      MessageBox({
                        message: '已经核销过了!',
                      });
                    }
                  }
                })
           }
           }).catch(err => { 
           if (action == 'cancel') {     //取消的回调
            alert('取消核销')
           } 
           });
    }
  },
  mounted () {
    var that = this
    this.$http({
      method: 'get',
      url: 'http://api.wangjianxin.top/myOrder?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId
    }).then(function (resp) {
      if (resp.status === 200) {
        that.dataList = resp.data
        console.log(that.dataList)
      }
    })
  },
  created () {
    this.activityId = this.$route.params.activityId
    this.userOpenId = this.$route.params.openId

  }
}
</script>

<style scoped>
  .order-con{
    width: 100vw;
    height: 100%;
    min-height: 100vh;
  }
  .backimg {
    width: 7.5rem;
    height: auto;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: -99;
  }
  /* 标题 */
  .head{
    width: 100vw;
    height: 1rem;
    background: #111111;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .head img{
    width: .2rem;
    position: absolute;
    left: .3rem;
    top: .35rem
  }
  .head span{
    font-size: .3rem;
    color: #fff;
  }

  /* 订单列表 */
  .orderList{
    width: 85%;
    margin: .5rem 5% 0;
    border-radius: .15rem;
    background: rgba(204,204,204,.3);
    padding: .2rem;
  }
  .orderList .order-num,.order-num div>span{
    font-size: .24rem;
    color: #ccc;
  }
  .order-num,.orderList ul>li,.orderList ul>li div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .order-num div{
    color: #fff;
  }
  .orderList ul{
    padding-top: .2rem;
  }
  .orderList li {
    font-size: .24rem;
    color: #fff;
    border-bottom: .02rem solid #444;
    padding: .15rem 0;
  }
  .orderList li:last-child{
    border-bottom: none;
  }
  .orderList li img{
    width: .9rem;
  }
  .orderList li div span{
    padding-left: .2rem;
  }
  .orderList li>span{
    width: 1.5rem;
    height: .5rem;
    text-align: center;
    line-height: .5rem;
    color: #111;
    background: linear-gradient(left,#999,#ccc);
    border-radius: .1rem;
  }
  .orderList li>span.active{
    background: linear-gradient(left,#f4c08e,#ffdfc0);
  }
</style>
